import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:mziot/app/config/design.dart';
import 'package:mziot/app/tools/tools.dart';
import 'package:mziot/generated/assets.dart';
import 'package:mziot/generated/locales.g.dart';

import '../controllers/wifi_controller.dart';

class WifiView extends GetView<WifiController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        elevation: 0,
      ),
      body: SafeArea(
        child: ListView(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          children: [
            _topView,
            _addDescView,
            _textField(false),
            SizedBox(height: 24),
            _textField(true),
            _bottomView,
          ],
        ),
      ),
    );
  }

  get _topView {
    return Container(
      margin: EdgeInsets.only(left: 24, right: 24, top: 24, bottom: 8),
      child: Text(
        LocaleKeys.add_devices_set_wifi.tr,
        style: MFont.semi_Bold24.apply(color: MColor.xFF333333),
      ),
    );
  }

  get _addDescView {
    return Container(
      margin: EdgeInsets.only(left: 24, right: 24, top: 0, bottom: 32),
      child: Text(
        LocaleKeys.add_devices_add_desc.tr,
        style: MFont.regular13.apply(color: MColor.xFF666666),
      ),
    );
  }

  Widget _textField(bool isPass) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 24),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            isPass
                ? LocaleKeys.add_devices_password.tr
                : LocaleKeys.add_devices_wifi_name.tr,
            style: MFont.semi_Bold17.apply(color: MColor.xFF333333),
            textAlign: TextAlign.start,
          ),
          Obx(() {
            final see = controller.isSee.value;
            return TextField(
              controller: isPass
                  ? controller.passController
                  : controller.nameController,
              obscureText: isPass ? !see : false,
              decoration: InputDecoration(
                hintText: LocaleKeys.public_input.tr,
                hintStyle: MFont.regular15.apply(color: MColor.xFF333333_60),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: MColor.xFFCCCCCC, width: 0.5),
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: MColor.xFF000000, width: 1),
                ),
                suffixIcon: isPass
                    ? GestureDetector(
                        onTap: () {
                          controller.isSee.value = !controller.isSee.value;
                        },
                        child: Image.asset(
                          see ? Assets.imagesEyeClose : Assets.imagesEyeOpen,
                          width: 16,
                          height: 16,
                        ),
                      )
                    : SizedBox(),
              ),
              textAlignVertical: TextAlignVertical.bottom,
              onChanged: (text) {
                if (isPass) {
                  controller.pass.value = text;
                } else {
                  controller.ssid.value = text;
                }
              },
            );
          }),
        ],
      ),
    );
  }

  get _bottomView {
    return Container(
      margin: EdgeInsets.only(top: 24),
      child: Row(
        children: [
          SizedBox(width: 48),
          Expanded(
            child: TextButton(
              onPressed: () {
                showCustomDialog(
                  LocaleKeys.add_devices_skip_tip.tr,
                  onConfirm: () {
                    Get.back();
                  },
                  cancel: true,
                );
              },
              style: ButtonStyle(
                shape: MaterialStateProperty.all(StadiumBorder()),
                backgroundColor: MaterialStateProperty.all(MColor.xFFF2F2F2),
              ),
              child: Text(
                LocaleKeys.public_skip.tr,
                style: MFont.regular13.apply(color: MColor.xFF333333),
              ),
            ),
          ),
          SizedBox(width: 16),
          Expanded(
            child: TextButton(
              onPressed: () {
                controller.setDevice();
              },
              style: ButtonStyle(
                shape: MaterialStateProperty.all(StadiumBorder()),
                backgroundColor: MaterialStateProperty.all(MColor.skin),
              ),
              child: Obx(() {
                return controller.isLoading.value
                    ? loadingWidget
                    : Text(
                        LocaleKeys.public_save.tr,
                        style: MFont.regular13.apply(color: Colors.white),
                      );
              }),
            ),
          ),
          SizedBox(width: 48),
        ],
      ),
    );
  }
}
